<template>
  <div
    :loading="loading"
    class="macarons"
    style="width: 100%; height: 370px;background-color: #FFFFFF;padding-top:16px;"
  />
</template>

<script>
import echarts from 'echarts';
import { zdClueTrend } from '@/api/home';
import { timestampToTime } from '@/utils/index';
require('echarts/theme/macarons'); // echarts theme
import resize from '../components/mixins/resize';
import { Loading } from 'element-ui';
export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      listQuery: {
        startTime: '',
        endTime: ''
      },
      times: [],
      timeNow: [
        new Date(new Date().toLocaleDateString()).getTime(),
        new Date(new Date().toLocaleDateString()).getTime() +
          (24 * 60 * 60 * 1000 - 1)
      ],
      XData: [],
      YData: [],
      loading: true
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  mounted() {
    this.listQuery.startTime = timestampToTime(this.timeNow[0]);
    this.listQuery.endTime = timestampToTime(this.timeNow[1]);
    this.getZdClueTrend();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async getZdClueTrend() {
      const loadingContent = document.getElementsByClassName('macarons')[0];
      Loading.service({
        target: loadingContent
      });
      const res = await zdClueTrend(this.listQuery);
      if (res.data.code === 200) {
        this.XData = res.data.data.X;
        const newData = res.data.data.Y.map(item => {
          item.type = 'line';
          item.areaStyle = {};
          item.emphasis = {
            focus: 'series'
          };
          return item;
        });
        this.loading = false;
        this.YData = newData;
        this.initChart();
      }
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          backgroundColor: '#FFFFFF',
          borderColor: '#000000',
          textStyle: {
            color: '#333333'
          }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' },
          label: {
            backgroundColor: '#777'
          }
        },
        legend: {
          right: 20,
          icon: 'rect',
          itemHeight: 4,
          itemWidth: 10
        },
        grid: {
          left: 55,
          right: 20,
          bottom: 30
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.XData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.YData
      });
    }
  }
};
</script>
